<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站 - 多风格文章详情底部组件</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 70px; /* 为底部栏留出空间 */
      transition: background-color 0.3s;
      overflow-x: hidden;
    }
    
    .container {
      max-width: 540px;
      margin: 0 auto;
      padding: 0 15px;
    }
    
    /* 页面容器 */
    .page-container {
      display: none;
    }
    
    .page-container.active {
      display: block;
    }
    
    /* 导航栏 */
    .navbar {
      padding: 15px 0;
      position: sticky;
      top: 0;
      z-index: 10;
    }
    
    .nav-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .nav-btn {
      background: none;
      border: none;
      font-size: 20px;
      cursor: pointer;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 文章详情区域 */
    .article-header {
      padding: 20px 0;
    }
    
    .article-title {
      font-size: 22px;
      font-weight: 700;
      line-height: 1.3;
      margin-bottom: 15px;
    }
    
    .article-meta {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
    }
    
    .author-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 10px;
    }
    
    .author-info {
      flex: 1;
    }
    
    .author-name {
      font-weight: 600;
      margin: 0 0 3px 0;
    }
    
    .publish-info {
      font-size: 13px;
      opacity: 0.7;
    }
    
    .follow-btn {
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      border: none;
      cursor: pointer;
    }
    
    .article-content {
      line-height: 1.8;
      margin-bottom: 25px;
    }
    
    .article-image {
      width: 100%;
      border-radius: 12px;
      margin: 20px 0;
    }
    
    .article-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin: 25px 0;
    }
    
    .article-tag {
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 13px;
      text-decoration: none;
    }
    
    .article-stats {
      display: flex;
      justify-content: space-between;
      padding: 15px 0;
      border-top: 1px solid;
      border-bottom: 1px solid;
      margin-bottom: 25px;
    }
    
    .stat-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 14px;
    }
    
    /* 评论区 */
    .comments-section {
      margin-bottom: 30px;
    }
    
    .section-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 15px;
    }
    
    .comment-input {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    
    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .comment-field {
      flex: 1;
      position: relative;
    }
    
    .comment-textarea {
      width: 100%;
      border: 1px solid;
      border-radius: 20px;
      padding: 10px 15px;
      resize: none;
      height: 40px;
      font-size: 14px;
      line-height: 20px;
      overflow: hidden;
    }
    
    .comment-textarea:focus {
      outline: none;
      height: 80px;
    }
    
    .send-btn {
      position: absolute;
      right: 10px;
      bottom: 10px;
      background: none;
      border: none;
      font-size: 16px;
      cursor: pointer;
    }
    
    .comment-item {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid;
    }
    
    .comment-item:last-child {
      border-bottom: none;
    }
    
    .comment-author {
      font-weight: 600;
      font-size: 15px;
      margin: 0 0 5px 0;
    }
    
    .comment-text {
      margin: 0 0 8px 0;
      line-height: 1.5;
    }
    
    .comment-actions {
      display: flex;
      gap: 15px;
      font-size: 13px;
    }
    
    .comment-action {
      display: flex;
      align-items: center;
      gap: 3px;
      cursor: pointer;
    }
    
    /* 风格切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 100;
      background-color: white;
      border-radius: 30px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      padding: 8px;
      display: flex;
      gap: 5px;
      border: 1px solid rgba(0,0,0,0.1);
    }
    
    .style-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      transition: transform 0.2s;
    }
    
    .style-btn:hover {
      transform: scale(1.1);
    }
    
    .style-btn.active {
      box-shadow: 0 0 0 2px white, 0 0 0 4px #0d6efd;
    }
    
    /* 文章详情底部交互栏 */
    .article-bottom-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60px;
      display: flex;
      align-items: center;
      padding: 0 15px;
      z-index: 99;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    }
    
    .action-group {
      display: flex;
      gap: 20px;
    }
    
    .action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      font-size: 11px;
      cursor: pointer;
      gap: 3px;
    }
    
    .action-btn i {
      font-size: 20px;
    }
    
    .share-group {
      margin-left: auto;
      display: flex;
      gap: 15px;
    }
    
    .share-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      font-size: 18px;
      cursor: pointer;
    }
    
    .primary-btn {
      padding: 8px 18px;
      border-radius: 20px;
      font-weight: 500;
      border: none;
      cursor: pointer;
      font-size: 14px;
    }
    
    /* 提示框 */
    .toast-container {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10000;
    }
    
    .toast {
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 12px 20px;
      font-size: 15px;
      display: none;
    }
    
    /* 风格1 - 经典蓝 */
    .style-1 {
      background-color: #ffffff;
      color: #212529;
    }
    
    .style-1 .navbar {
      background-color: white;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    
    .style-1 .nav-btn {
      color: #6c757d;
    }
    
    .style-1 .nav-btn:hover {
      background-color: #f1f5f9;
    }
    
    .style-1 .follow-btn {
      background-color: #0d6efd;
      color: white;
    }
    
    .style-1 .follow-btn.following {
      background-color: #e9ecef;
      color: #212529;
    }
    
    .style-1 .article-tag {
      background-color: #e7f1ff;
      color: #0d6efd;
    }
    
    .style-1 .article-stats {
      border-color: #e9ecef;
    }
    
    .style-1 .comment-textarea {
      border-color: #ced4da;
      background-color: #f8f9fa;
    }
    
    .style-1 .send-btn {
      color: #0d6efd;
    }
    
    .style-1 .comment-item {
      border-color: #e9ecef;
    }
    
    .style-1 .comment-action {
      color: #6c757d;
    }
    
    .style-1 .comment-action:hover {
      color: #0d6efd;
    }
    
    .style-1 .article-bottom-bar {
      background-color: white;
    }
    
    .style-1 .action-btn {
      color: #6c757d;
    }
    
    .style-1 .action-btn.active {
      color: #0d6efd;
    }
    
    .style-1 .share-btn {
      color: #6c757d;
      background-color: #f1f5f9;
    }
    
    .style-1 .share-btn:hover {
      background-color: #e1e8ed;
    }
    
    .style-1 .primary-btn {
      background-color: #0d6efd;
      color: white;
    }
    
    /* 风格2 - 活力橙 */
    .style-2 {
      background-color: #ffffff;
      color: #854d0e;
    }
    
    .style-2 .navbar {
      background-color: white;
      box-shadow: 0 2px 5px rgba(249, 115, 22, 0.1);
    }
    
    .style-2 .nav-btn {
      color: #c2410c;
    }
    
    .style-2 .nav-btn:hover {
      background-color: #fff3cd;
    }
    
    .style-2 .follow-btn {
      background-color: #ea580c;
      color: white;
    }
    
    .style-2 .follow-btn.following {
      background-color: #fff3cd;
      color: #854d0e;
    }
    
    .style-2 .article-tag {
      background-color: #fff3cd;
      color: #ea580c;
    }
    
    .style-2 .article-stats {
      border-color: #ffeedd;
    }
    
    .style-2 .comment-textarea {
      border-color: #ffedd5;
      background-color: #fff9f0;
    }
    
    .style-2 .send-btn {
      color: #ea580c;
    }
    
    .style-2 .comment-item {
      border-color: #ffeedd;
    }
    
    .style-2 .comment-action {
      color: #c2410c;
    }
    
    .style-2 .comment-action:hover {
      color: #ea580c;
    }
    
    .style-2 .article-bottom-bar {
      background-color: white;
    }
    
    .style-2 .action-btn {
      color: #c2410c;
    }
    
    .style-2 .action-btn.active {
      color: #ea580c;
    }
    
    .style-2 .share-btn {
      color: #c2410c;
      background-color: #fff3cd;
    }
    
    .style-2 .share-btn:hover {
      background-color: #ffe6a7;
    }
    
    .style-2 .primary-btn {
      background-color: #ea580c;
      color: white;
    }
    
    /* 风格3 - 暗黑系 */
    .style-3 {
      background-color: #1e293b;
      color: #f8fafc;
    }
    
    .style-3 .navbar {
      background-color: #0f172a;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    
    .style-3 .nav-btn {
      color: #94a3b8;
    }
    
    .style-3 .nav-btn:hover {
      background-color: #334155;
    }
    
    .style-3 .follow-btn {
      background-color: #3b82f6;
      color: white;
    }
    
    .style-3 .follow-btn.following {
      background-color: #334155;
      color: #f8fafc;
    }
    
    .style-3 .article-tag {
      background-color: #334155;
      color: #93c5fd;
    }
    
    .style-3 .article-stats {
      border-color: #334155;
    }
    
    .style-3 .comment-textarea {
      border-color: #334155;
      background-color: #0f172a;
      color: #f8fafc;
    }
    
    .style-3 .send-btn {
      color: #93c5fd;
    }
    
    .style-3 .comment-item {
      border-color: #334155;
    }
    
    .style-3 .comment-action {
      color: #94a3b8;
    }
    
    .style-3 .comment-action:hover {
      color: #93c5fd;
    }
    
    .style-3 .article-bottom-bar {
      background-color: #0f172a;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    }
    
    .style-3 .action-btn {
      color: #94a3b8;
    }
    
    .style-3 .action-btn.active {
      color: #93c5fd;
    }
    
    .style-3 .share-btn {
      color: #94a3b8;
      background-color: #334155;
    }
    
    .style-3 .share-btn:hover {
      background-color: #475569;
    }
    
    .style-3 .primary-btn {
      background-color: #3b82f6;
      color: white;
    }
    
    /* 风格4 - 清新绿 */
    .style-4 {
      background-color: #ffffff;
      color: #166534;
    }
    
    .style-4 .navbar {
      background-color: white;
      box-shadow: 0 2px 5px rgba(16, 185, 129, 0.1);
    }
    
    .style-4 .nav-btn {
      color: #166534;
    }
    
    .style-4 .nav-btn:hover {
      background-color: #dcfce7;
    }
    
    .style-4 .follow-btn {
      background-color: #15803d;
      color: white;
    }
    
    .style-4 .follow-btn.following {
      background-color: #dcfce7;
      color: #166534;
    }
    
    .style-4 .article-tag {
      background-color: #dcfce7;
      color: #15803d;
    }
    
    .style-4 .article-stats {
      border-color: #dcfce7;
    }
    
    .style-4 .comment-textarea {
      border-color: #bbf7d0;
      background-color: #f0fdf4;
    }
    
    .style-4 .send-btn {
      color: #15803d;
    }
    
    .style-4 .comment-item {
      border-color: #dcfce7;
    }
    
    .style-4 .comment-action {
      color: #166534;
    }
    
    .style-4 .comment-action:hover {
      color: #15803d;
    }
    
    .style-4 .article-bottom-bar {
      background-color: white;
    }
    
    .style-4 .action-btn {
      color: #166534;
    }
    
    .style-4 .action-btn.active {
      color: #15803d;
    }
    
    .style-4 .share-btn {
      color: #166534;
      background-color: #dcfce7;
    }
    
    .style-4 .share-btn:hover {
      background-color: #bbf7d0;
    }
    
    .style-4 .primary-btn {
      background-color: #15803d;
      color: white;
    }
  </style>
</head>
<body>
  <!-- 风格切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="1" style="background-color: #0d6efd;"></button>
    <button class="style-btn" data-style="2" style="background-color: #ea580c;"></button>
    <button class="style-btn" data-style="3" style="background-color: #3b82f6;"></button>
    <button class="style-btn" data-style="4" style="background-color: #15803d;"></button>
  </div>
  
  <!-- 风格1 - 经典蓝 -->
  <div class="page-container style-1 active" data-style="1">
    <div class="navbar">
      <div class="container nav-content">
        <button class="nav-btn back-btn">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="nav-title">文章详情</h1>
        <button class="nav-btn more-btn">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
    </div>
    
    <div class="container">
      <div class="article-header">
        <h1 class="article-title">人工智能如何改变未来社交方式？专家深度解析</h1>
        
        <div class="article-meta">
          <img src="https://picsum.photos/200/200?random=50" alt="作者头像" class="author-avatar">
          <div class="author-info">
            <h3 class="author-name">科技观察家</h3>
            <p class="publish-info">发布于 2小时前 · 10分钟阅读</p>
          </div>
          <button class="follow-btn">关注</button>
        </div>
      </div>
      
      <div class="article-content">
        <p>随着人工智能技术的飞速发展，我们的社交模式正在经历前所未有的变革。从推荐算法到虚拟助手，从面部识别到情感分析，AI正在以各种方式重塑我们与他人连接和互动的方式。</p>
        
        <img src="https://picsum.photos/600/400?random=51" alt="AI社交概念图" class="article-image">
        
        <p>专家表示，未来的社交平台将更加智能化和个性化。AI算法能够分析用户的兴趣、行为模式和社交偏好，从而推荐更匹配的社交对象和内容。这种精准匹配不仅能提高社交效率，还能帮助人们发现更多志同道合的朋友。</p>
        
        <p>虚拟社交也是一个重要发展方向。随着VR/AR技术与AI的结合，人们将能够在虚拟空间中进行更真实、更沉浸式的社交互动。AI驱动的虚拟形象甚至能够模拟人类的情感和反应，使虚拟社交体验更加自然。</p>
        
        <img src="https://picsum.photos/600/400?random=52" alt="虚拟社交场景" class="article-image">
        
        <p>然而，AI社交也带来了一些挑战，如隐私问题、算法偏见和社交技能退化等。专家呼吁在推进技术发展的同时，也要建立相应的伦理规范和监管机制，确保AI技术能够真正服务于人类的社交需求，而不是取代或扭曲它。</p>
      </div>
      
      <div class="article-tags">
        <a href="#" class="article-tag">人工智能</a>
        <a href="#" class="article-tag">社交网络</a>
        <a href="#" class="article-tag">未来科技</a>
        <a href="#" class="article-tag">社会趋势</a>
      </div>
      
      <div class="article-stats">
        <div class="stat-item">
          <i class="fa fa-eye"></i>
          <span>2.4k 阅读</span>
        </div>
        <div class="stat-item">
          <i class="fa fa-comment-o"></i>
          <span>48 评论</span>
        </div>
        <div class="stat-item">
          <i class="fa fa-bookmark-o"></i>
          <span>126 收藏</span>
        </div>
      </div>
      
      <div class="comments-section">
        <h2 class="section-title">评论 (48)</h2>
        
        <div class="comment-input">
          <img src="https://picsum.photos/200/200?random=60" alt="用户头像" class="user-avatar">
          <div class="comment-field">
            <textarea class="comment-textarea" placeholder="分享你的想法..."></textarea>
            <button class="send-btn">
              <i class="fa fa-paper-plane"></i>
            </button>
          </div>
        </div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/200/200?random=61" alt="评论者头像" class="user-avatar">
          <div class="comment-content">
            <h3 class="comment-author">数字生活家</h3>
            <p class="comment-text">非常有见地的分析！我已经感受到AI在社交推荐方面的进步，确实帮助我认识了更多有共同兴趣的人。</p>
            <div class="comment-actions">
              <div class="comment-action">
                <i class="fa fa-heart-o"></i>
                <span>24</span>
              </div>
              <div class="comment-action">
                <i class="fa fa-reply"></i>
                <span>回复</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/200/200?random=62" alt="评论者头像" class="user-avatar">
          <div class="comment-content">
            <h3 class="comment-author">科技伦理学者</h3>
            <p class="comment-text">虽然AI带来了便利，但我担心算法会导致"信息茧房"，限制人们的视野和社交圈多样性。这是我们需要警惕的问题。</p>
            <div class="comment-actions">
              <div class="comment-action">
                <i class="fa fa-heart-o"></i>
                <span>18</span>
              </div>
              <div class="comment-action">
                <i class="fa fa-reply"></i>
                <span>回复</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 文章详情底部交互栏 -->
    <div class="article-bottom-bar style-1">
      <div class="action-group">
        <button class="action-btn like-btn">
          <i class="fa fa-heart-o"></i>
          <span>喜欢</span>
        </button>
        <button class="action-btn comment-btn">
          <i class="fa fa-comment-o"></i>
          <span>评论</span>
        </button>
        <button class="action-btn save-btn">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </button>
      </div>
      
      <div class="share-group">
        <button class="share-btn">
          <i class="fa fa-share-alt"></i>
        </button>
        <button class="primary-btn forward-btn">转发</button>
      </div>
    </div>
  </div>
  
  <!-- 风格2 - 活力橙 -->
  <div class="page-container style-2" data-style="2">
    <!-- 内容与风格1相同，样式由CSS控制 -->
    <div class="navbar">
      <div class="container nav-content">
        <button class="nav-btn back-btn">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="nav-title">文章详情</h1>
        <button class="nav-btn more-btn">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
    </div>
    
    <div class="container">
      <div class="article-header">
        <h1 class="article-title">人工智能如何改变未来社交方式？专家深度解析</h1>
        
        <div class="article-meta">
          <img src="https://picsum.photos/200/200?random=50" alt="作者头像" class="author-avatar">
          <div class="author-info">
            <h3 class="author-name">科技观察家</h3>
            <p class="publish-info">发布于 2小时前 · 10分钟阅读</p>
          </div>
          <button class="follow-btn">关注</button>
        </div>
      </div>
      
      <div class="article-content">
        <p>随着人工智能技术的飞速发展，我们的社交模式正在经历前所未有的变革。从推荐算法到虚拟助手，从面部识别到情感分析，AI正在以各种方式重塑我们与他人连接和互动的方式。</p>
        
        <img src="https://picsum.photos/600/400?random=51" alt="AI社交概念图" class="article-image">
        
        <p>专家表示，未来的社交平台将更加智能化和个性化。AI算法能够分析用户的兴趣、行为模式和社交偏好，从而推荐更匹配的社交对象和内容。这种精准匹配不仅能提高社交效率，还能帮助人们发现更多志同道合的朋友。</p>
        
        <p>虚拟社交也是一个重要发展方向。随着VR/AR技术与AI的结合，人们将能够在虚拟空间中进行更真实、更沉浸式的社交互动。AI驱动的虚拟形象甚至能够模拟人类的情感和反应，使虚拟社交体验更加自然。</p>
        
        <img src="https://picsum.photos/600/400?random=52" alt="虚拟社交场景" class="article-image">
        
        <p>然而，AI社交也带来了一些挑战，如隐私问题、算法偏见和社交技能退化等。专家呼吁在推进技术发展的同时，也要建立相应的伦理规范和监管机制，确保AI技术能够真正服务于人类的社交需求，而不是取代或扭曲它。</p>
      </div>
      
      <div class="article-tags">
        <a href="#" class="article-tag">人工智能</a>
        <a href="#" class="article-tag">社交网络</a>
        <a href="#" class="article-tag">未来科技</a>
        <a href="#" class="article-tag">社会趋势</a>
      </div>
      
      <div class="article-stats">
        <div class="stat-item">
          <i class="fa fa-eye"></i>
          <span>2.4k 阅读</span>
        </div>
        <div class="stat-item">
          <i class="fa fa-comment-o"></i>
          <span>48 评论</span>
        </div>
        <div class="stat-item">
          <i class="fa fa-bookmark-o"></i>
          <span>126 收藏</span>
        </div>
      </div>
      
      <div class="comments-section">
        <h2 class="section-title">评论 (48)</h2>
        
        <div class="comment-input">
          <img src="https://picsum.photos/200/200?random=60" alt="用户头像" class="user-avatar">
          <div class="comment-field">
            <textarea class="comment-textarea" placeholder="分享你的想法..."></textarea>
            <button class="send-btn">
              <i class="fa fa-paper-plane"></i>
            </button>
          </div>
        </div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/200/200?random=61" alt="评论者头像" class="user-avatar">
          <div class="comment-content">
            <h3 class="comment-author">数字生活家</h3>
            <p class="comment-text">非常有见地的分析！我已经感受到AI在社交推荐方面的进步，确实帮助我认识了更多有共同兴趣的人。</p>
            <div class="comment-actions">
              <div class="comment-action">
                <i class="fa fa-heart-o"></i>
                <span>24</span>
              </div>
              <div class="comment-action">
                <i class="fa fa-reply"></i>
                <span>回复</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/200/200?random=62" alt="评论者头像" class="user-avatar">
          <div class="comment-content">
            <h3 class="comment-author">科技伦理学者</h3>
            <p class="comment-text">虽然AI带来了便利，但我担心算法会导致"信息茧房"，限制人们的视野和社交圈多样性。这是我们需要警惕的问题。</p>
            <div class="comment-actions">
              <div class="comment-action">
                <i class="fa fa-heart-o"></i>
                <span>18</span>
              </div>
              <div class="comment-action">
                <i class="fa fa-reply"></i>
                <span>回复</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 文章详情底部交互栏 -->
    <div class="article-bottom-bar style-2">
      <div class="action-group">
        <button class="action-btn like-btn">
          <i class="fa fa-heart-o"></i>
          <span>喜欢</span>
        </button>
        <button class="action-btn comment-btn">
          <i class="fa fa-comment-o"></i>
          <span>评论</span>
        </button>
        <button class="action-btn save-btn">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </button>
      </div>
      
      <div class="share-group">
        <button class="share-btn">
          <i class="fa fa-share-alt"></i>
        </button>
        <button class="primary-btn forward-btn">转发</button>
      </div>
    </div>
  </div>
  
  <!-- 风格3 - 暗黑系 -->
  <div class="page-container style-3" data-style="3">
    <!-- 内容与风格1相同，样式由CSS控制 -->
    <div class="navbar">
      <div class="container nav-content">
        <button class="nav-btn back-btn">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="nav-title">文章详情</h1>
        <button class="nav-btn more-btn">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
    </div>
    
    <div class="container">
      <div class="article-header">
        <h1 class="article-title">人工智能如何改变未来社交方式？专家深度解析</h1>
        
        <div class="article-meta">
          <img src="https://picsum.photos/200/200?random=50" alt="作者头像" class="author-avatar">
          <div class="author-info">
            <h3 class="author-name">科技观察家</h3>
            <p class="publish-info">发布于 2小时前 · 10分钟阅读</p>
          </div>
          <button class="follow-btn">关注</button>
        </div>
      </div>
      
      <div class="article-content">
        <p>随着人工智能技术的飞速发展，我们的社交模式正在经历前所未有的变革。从推荐算法到虚拟助手，从面部识别到情感分析，AI正在以各种方式重塑我们与他人连接和互动的方式。</p>
        
        <img src="https://picsum.photos/600/400?random=51" alt="AI社交概念图" class="article-image">
        
        <p>专家表示，未来的社交平台将更加智能化和个性化。AI算法能够分析用户的兴趣、行为模式和社交偏好，从而推荐更匹配的社交对象和内容。这种精准匹配不仅能提高社交效率，还能帮助人们发现更多志同道合的朋友。</p>
        
        <p>虚拟社交也是一个重要发展方向。随着VR/AR技术与AI的结合，人们将能够在虚拟空间中进行更真实、更沉浸式的社交互动。AI驱动的虚拟形象甚至能够模拟人类的情感和反应，使虚拟社交体验更加自然。</p>
        
        <img src="https://picsum.photos/600/400?random=52" alt="虚拟社交场景" class="article-image">
        
        <p>然而，AI社交也带来了一些挑战，如隐私问题、算法偏见和社交技能退化等。专家呼吁在推进技术发展的同时，也要建立相应的伦理规范和监管机制，确保AI技术能够真正服务于人类的社交需求，而不是取代或扭曲它。</p>
      </div>
      
      <div class="article-tags">
        <a href="#" class="article-tag">人工智能</a>
        <a href="#" class="article-tag">社交网络</a>
        <a href="#" class="article-tag">未来科技</a>
        <a href="#" class="article-tag">社会趋势</a>
      </div>
      
      <div class="article-stats">
        <div class="stat-item">
          <i class="fa fa-eye"></i>
          <span>2.4k 阅读</span>
        </div>
        <div class="stat-item">
          <i class="fa fa-comment-o"></i>
          <span>48 评论</span>
        </div>
        <div class="stat-item">
          <i class="fa fa-bookmark-o"></i>
          <span>126 收藏</span>
        </div>
      </div>
      
      <div class="comments-section">
        <h2 class="section-title">评论 (48)</h2>
        
        <div class="comment-input">
          <img src="https://picsum.photos/200/200?random=60" alt="用户头像" class="user-avatar">
          <div class="comment-field">
            <textarea class="comment-textarea" placeholder="分享你的想法..."></textarea>
            <button class="send-btn">
              <i class="fa fa-paper-plane"></i>
            </button>
          </div>
        </div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/200/200?random=61" alt="评论者头像" class="user-avatar">
          <div class="comment-content">
            <h3 class="comment-author">数字生活家</h3>
            <p class="comment-text">非常有见地的分析！我已经感受到AI在社交推荐方面的进步，确实帮助我认识了更多有共同兴趣的人。</p>
            <div class="comment-actions">
              <div class="comment-action">
                <i class="fa fa-heart-o"></i>
                <span>24</span>
              </div>
              <div class="comment-action">
                <i class="fa fa-reply"></i>
                <span>回复</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/200/200?random=62" alt="评论者头像" class="user-avatar">
          <div class="comment-content">
            <h3 class="comment-author">科技伦理学者</h3>
            <p class="comment-text">虽然AI带来了便利，但我担心算法会导致"信息茧房"，限制人们的视野和社交圈多样性。这是我们需要警惕的问题。</p>
            <div class="comment-actions">
              <div class="comment-action">
                <i class="fa fa-heart-o"></i>
                <span>18</span>
              </div>
              <div class="comment-action">
                <i class="fa fa-reply"></i>
                <span>回复</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 文章详情底部交互栏 -->
    <div class="article-bottom-bar style-3">
      <div class="action-group">
        <button class="action-btn like-btn">
          <i class="fa fa-heart-o"></i>
          <span>喜欢</span>
        </button>
        <button class="action-btn comment-btn">
          <i class="fa fa-comment-o"></i>
          <span>评论</span>
        </button>
        <button class="action-btn save-btn">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </button>
      </div>
      
      <div class="share-group">
        <button class="share-btn">
          <i class="fa fa-share-alt"></i>
        </button>
        <button class="primary-btn forward-btn">转发</button>
      </div>
    </div>
  </div>
  
  <!-- 风格4 - 清新绿 -->
  <div class="page-container style-4" data-style="4">
    <!-- 内容与风格1相同，样式由CSS控制 -->
    <div class="navbar">
      <div class="container nav-content">
        <button class="nav-btn back-btn">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="nav-title">文章详情</h1>
        <button class="nav-btn more-btn">
          <i class="fa fa-ellipsis-h"></i>
        </button>
      </div>
    </div>
    
    <div class="container">
      <div class="article-header">
        <h1 class="article-title">人工智能如何改变未来社交方式？专家深度解析</h1>
        
        <div class="article-meta">
          <img src="https://picsum.photos/200/200?random=50" alt="作者头像" class="author-avatar">
          <div class="author-info">
            <h3 class="author-name">科技观察家</h3>
            <p class="publish-info">发布于 2小时前 · 10分钟阅读</p>
          </div>
          <button class="follow-btn">关注</button>
        </div>
      </div>
      
      <div class="article-content">
        <p>随着人工智能技术的飞速发展，我们的社交模式正在经历前所未有的变革。从推荐算法到虚拟助手，从面部识别到情感分析，AI正在以各种方式重塑我们与他人连接和互动的方式。</p>
        
        <img src="https://picsum.photos/600/400?random=51" alt="AI社交概念图" class="article-image">
        
        <p>专家表示，未来的社交平台将更加智能化和个性化。AI算法能够分析用户的兴趣、行为模式和社交偏好，从而推荐更匹配的社交对象和内容。这种精准匹配不仅能提高社交效率，还能帮助人们发现更多志同道合的朋友。</p>
        
        <p>虚拟社交也是一个重要发展方向。随着VR/AR技术与AI的结合，人们将能够在虚拟空间中进行更真实、更沉浸式的社交互动。AI驱动的虚拟形象甚至能够模拟人类的情感和反应，使虚拟社交体验更加自然。</p>
        
        <img src="https://picsum.photos/600/400?random=52" alt="虚拟社交场景" class="article-image">
        
        <p>然而，AI社交也带来了一些挑战，如隐私问题、算法偏见和社交技能退化等。专家呼吁在推进技术发展的同时，也要建立相应的伦理规范和监管机制，确保AI技术能够真正服务于人类的社交需求，而不是取代或扭曲它。</p>
      </div>
      
      <div class="article-tags">
        <a href="#" class="article-tag">人工智能</a>
        <a href="#" class="article-tag">社交网络</a>
        <a href="#" class="article-tag">未来科技</a>
        <a href="#" class="article-tag">社会趋势</a>
      </div>
      
      <div class="article-stats">
        <div class="stat-item">
          <i class="fa fa-eye"></i>
          <span>2.4k 阅读</span>
        </div>
        <div class="stat-item">
          <i class="fa fa-comment-o"></i>
          <span>48 评论</span>
        </div>
        <div class="stat-item">
          <i class="fa fa-bookmark-o"></i>
          <span>126 收藏</span>
        </div>
      </div>
      
      <div class="comments-section">
        <h2 class="section-title">评论 (48)</h2>
        
        <div class="comment-input">
          <img src="https://picsum.photos/200/200?random=60" alt="用户头像" class="user-avatar">
          <div class="comment-field">
            <textarea class="comment-textarea" placeholder="分享你的想法..."></textarea>
            <button class="send-btn">
              <i class="fa fa-paper-plane"></i>
            </button>
          </div>
        </div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/200/200?random=61" alt="评论者头像" class="user-avatar">
          <div class="comment-content">
            <h3 class="comment-author">数字生活家</h3>
            <p class="comment-text">非常有见地的分析！我已经感受到AI在社交推荐方面的进步，确实帮助我认识了更多有共同兴趣的人。</p>
            <div class="comment-actions">
              <div class="comment-action">
                <i class="fa fa-heart-o"></i>
                <span>24</span>
              </div>
              <div class="comment-action">
                <i class="fa fa-reply"></i>
                <span>回复</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="comment-item">
          <img src="https://picsum.photos/200/200?random=62" alt="评论者头像" class="user-avatar">
          <div class="comment-content">
            <h3 class="comment-author">科技伦理学者</h3>
            <p class="comment-text">虽然AI带来了便利，但我担心算法会导致"信息茧房"，限制人们的视野和社交圈多样性。这是我们需要警惕的问题。</p>
            <div class="comment-actions">
              <div class="comment-action">
                <i class="fa fa-heart-o"></i>
                <span>18</span>
              </div>
              <div class="comment-action">
                <i class="fa fa-reply"></i>
                <span>回复</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 文章详情底部交互栏 -->
    <div class="article-bottom-bar style-4">
      <div class="action-group">
        <button class="action-btn like-btn">
          <i class="fa fa-heart-o"></i>
          <span>喜欢</span>
        </button>
        <button class="action-btn comment-btn">
          <i class="fa fa-comment-o"></i>
          <span>评论</span>
        </button>
        <button class="action-btn save-btn">
          <i class="fa fa-bookmark-o"></i>
          <span>收藏</span>
        </button>
      </div>
      
      <div class="share-group">
        <button class="share-btn">
          <i class="fa fa-share-alt"></i>
        </button>
        <button class="primary-btn forward-btn">转发</button>
      </div>
    </div>
  </div>
  
  <!-- 提示框 -->
  <div class="toast-container">
    <div class="toast" id="toast-notification">操作成功</div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 风格切换功能
    const styleBtns = document.querySelectorAll('.style-btn');
    const pageContainers = document.querySelectorAll('.page-container');
    
    styleBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        // 移除所有活跃状态
        styleBtns.forEach(b => b.classList.remove('active'));
        pageContainers.forEach(page => page.classList.remove('active'));
        
        // 添加当前活跃状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.querySelector(`.page-container[data-style="${style}"]`).classList.add('active');
      });
    });
    
    // 返回按钮点击事件
    document.querySelectorAll('.back-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.closest('.page-container.active')) {
          showToast('返回上一页');
        }
      });
    });
    
    // 更多按钮点击事件
    document.querySelectorAll('.more-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.closest('.page-container.active')) {
          showToast('打开更多选项');
        }
      });
    });
    
    // 关注按钮点击事件
    document.querySelectorAll('.follow-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.closest('.page-container.active')) {
          if (this.textContent === '关注') {
            this.textContent = '已关注';
            this.classList.add('following');
            showToast('关注成功');
          } else {
            this.textContent = '关注';
            this.classList.remove('following');
            showToast('已取消关注');
          }
        }
      });
    });
    
    // 底部交互按钮事件
    document.querySelectorAll('.like-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.closest('.page-container.active')) {
          const icon = this.querySelector('i');
          if (icon.classList.contains('fa-heart-o')) {
            icon.classList.remove('fa-heart-o');
            icon.classList.add('fa-heart');
            this.classList.add('active');
            showToast('点赞成功');
          } else {
            icon.classList.remove('fa-heart');
            icon.classList.add('fa-heart-o');
            this.classList.remove('active');
            showToast('已取消点赞');
          }
        }
      });
    });
    
    document.querySelectorAll('.comment-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.closest('.page-container.active')) {
          this.classList.add('active');
          setTimeout(() => {
            this.classList.remove('active');
          }, 200);
          // 滚动到评论区
          document.querySelector('.comments-section').scrollIntoView({
            behavior: 'smooth'
          });
          // 聚焦到评论框
          document.querySelector('.comment-textarea').focus();
          showToast('评论区');
        }
      });
    });
    
    document.querySelectorAll('.save-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.closest('.page-container.active')) {
          const icon = this.querySelector('i');
          if (icon.classList.contains('fa-bookmark-o')) {
            icon.classList.remove('fa-bookmark-o');
            icon.classList.add('fa-bookmark');
            this.classList.add('active');
            showToast('收藏成功');
          } else {
            icon.classList.remove('fa-bookmark');
            icon.classList.add('fa-bookmark-o');
            this.classList.remove('active');
            showToast('已取消收藏');
          }
        }
      });
    });
    
    document.querySelectorAll('.share-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.closest('.page-container.active')) {
          showToast('打开分享选项');
        }
      });
    });
    
    document.querySelectorAll('.forward-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.closest('.page-container.active')) {
          showToast('转发文章');
        }
      });
    });
    
    // 评论相关事件
    document.querySelectorAll('.comment-textarea').forEach(textarea => {
      textarea.addEventListener('input', function() {
        // 自动调整高度
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
      });
    });
    
    document.querySelectorAll('.send-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        const textarea = this.closest('.comment-field').querySelector('.comment-textarea');
        if (textarea.value.trim()) {
          showToast('评论发布成功');
          textarea.value = '';
          textarea.style.height = '40px';
        } else {
          showToast('请输入评论内容');
        }
      });
    });
    
    document.querySelectorAll('.comment-action').forEach(action => {
      action.addEventListener('click', function() {
        if (this.querySelector('i').classList.contains('fa-heart-o')) {
          this.querySelector('i').classList.remove('fa-heart-o');
          this.querySelector('i').classList.add('fa-heart');
          const count = this.querySelector('span');
          count.textContent = parseInt(count.textContent) + 1;
          showToast('点赞成功');
        } else if (this.querySelector('i').classList.contains('fa-reply')) {
          showToast('回复评论');
          document.querySelector('.comment-textarea').focus();
        }
      });
    });
    
    // 标签点击事件
    document.querySelectorAll('.article-tag').forEach(tag => {
      tag.addEventListener('click', function(e) {
        e.preventDefault();
        showToast(`查看 "${this.textContent}" 相关文章`);
      });
    });
    
    // 显示提示框
    function showToast(message) {
      const toast = document.getElementById('toast-notification');
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.display = 'none';
      }, 2000);
    }
  </script>
</body>
</html>
